<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <!-- <link rel="stylesheet" href="../bootstrap-4.0.0-dist/css/bootstrap.min.css">
    <script src="../bootstrap-4.0.0-dist/js/bootstrap.min.js"></script>
    <script src="../jquery/js/jquery-ui.custom.min"></script> -->

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../mycss/main.css"/>
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
    <title>home</title>
  </head>

  <body>
    <!-- header-->
    <nav class="navbar navbar-inverse" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
          <a class="navbar-brand" href="#">租房系统</a>
      </div>
      <div>
          <ul class="nav navbar-nav">
            <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                      成都 <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                      <li><a href="#">上海</a></li>
                      <li><a href="#">武汉</a></li>
                      <li><a href="#">西安</a></li>
                      <li><a href="#">北京</a></li>
                  </ul>
              </li>
              <li class="active"><a href="#">首页</a></li>
              <li><a href="#">业主</a></li>
          </ul>
      </div>
      <div class="div-user">
        <ul class="nav navbar-nav">
          <li>
            <div class="div-avatar ">
               <a href="#" id="myinfo" class="thumbnail" data-toggle="modal" data-target="#myModal-person">
                    <img src="../imgs/3_141110174904_1.jpg" alt="avatar" />
                </a>
            </div>
          </li>
          <li><a href="" class="btn" data-toggle="modal" data-target="#myModal-login">登录</a></li>
          <li><a href="" class="btn" data-toggle="modal" data-target="#myModal-register">注册</a></li>
          <li><a href="logout" >退出</a></li>
        </ul>
      </div>
    </div>
    </nav>
    <!-- header-->

    <!-- 个人信息 -->
    <div class="modal fade" id="myModal-person" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title">
              个人信息
            </h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form" action="showUser">
              <div class="form-group">
                <label class="col-sm-2 control-label">头像</label>
                <div class="col-sm-5">
                  <a href="#" class="thumbnail" data-toggle="modal" data-target="#myModal-person">
                    <img src="../imgs/3_141110174904_1.jpg" alt="avatar"/>
                  </a>
                </div>
              </div>
              <div class="form-group">
                <label for="nickname" class="col-sm-2 control-label">昵称:</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="nickname"
                       placeholder="nickname" name="nickname"/>
                </div>
              </div>
              <div class="form-group">
                <label for="birthday" class="col-sm-2 control-label">生日</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="birthday"
                       placeholder="birthday" name="birthday"/>
                </div>
              </div>
              <div class="form-group">
                <label for="address" class="col-sm-2 control-label">地址</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="address"
                       placeholder="address" name="address"/>
                </div>
              </div>
             

              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="submit" class="btn btn-primary">
                  修改
                </button>
              </div>
            </form>
          </div>
          
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <!-- 个人信息 -->
 
    <!-- 登录框 -->
    <div class="modal fade" id="myModal-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              x
            </button>
            <h4 class="modal-title" id="myModalLabel">
              登录
            </h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form" action="loginPost">
              <div class="form-group">
                <label for="account" class="col-sm-2 control-label">账号</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="account"
                       placeholder="account" name="account"/>
                </div>
              </div>
              <div class="form-group">
                <label for="password" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="password"
                       placeholder="password" name="password"/>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" /> 请记住我
                    </label>
                  </div>
                </div>
              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="submit" class="btn btn-primary">
                  登录
                </button>
              </div>
            </form>
          </div>
          
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <!-- 登录框 -->

    <!-- 注册框 -->
    <div class="modal fade" id="myModal-register" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
              &times;
            </button>
            <h4 class="modal-title" id="myModalLabel-register">
              注册
            </h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label for="account-register" class="col-sm-2 control-label">账号</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="account-register"
                       placeholder="account" name="account"/>
                </div>
              </div>
              <div class="form-group">
                <label for="password-register" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="password-register"
                       placeholder="password" name="password" />
                </div>
              </div>
              <div class="form-group">
                <label for="password-confirm-register" class="col-sm-2 control-label">密码确认</label>
                <div class="col-sm-10">
                  <input type="text" class="form-control" id="password-confirm-register"
                       placeholder="password confirm" name="passwordConfirm"/>
                </div>
              </div>
              

              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                  注册
                </button>
              </div>
            </form>
          </div>
          
        </div><!-- /.modal-content -->
      </div><!-- /.modal -->
    </div>
    <!-- 注册框 -->

    <!--广告栏-->
    <div class="div-box">
      <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
          <li data-target="#myCarousel" data-slide-to="1"></li>
          <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="../imgs/ChAFfVph2h2AGdKKAApvRjK7dPs812.png" alt="First slide" />
            <div class="carousel-caption">标题 1</div>
          </div>
          <div class="item">
            <img src="../imgs/ChAFD1ob1gyAPnEiAARe1QPIHdg475.jpg" alt="First slide" />
            <div class="carousel-caption">标题 2</div>
          </div>
          <div class="item">
            <img src="../imgs/ChAFD1qOcv-Af5rWAAaxDtEftCA559.jpg" alt="First slide" />
            <div class="carousel-caption">标题 3</div>
          </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="carousel-control left" href="#myCarousel" 
           data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" 
           data-slide="next">&rsaquo;</a>
      </div>
    </div>
    <!--广告栏-->

    <!--查找-->
    <div class="div-box">
      <ul class="nav navbar-nav">
        <li class="li-search">
          <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">搜索</span>
          </div>
        </li>
        <li class="li-mapfind">
          <button class="btn btn-warning">地图找房</button>
        </li>
      </ul>
    </div>
    <!--查找-->

    <!--筛选条件-->
    <div class="div-box">
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td>
              <b>租金：</b>
              <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                  <input type="radio" name="options" id="option1" /> 1000元以下
                </label>
                <label class="btn">
                  <input type="radio" name="options" id="option2" /> 1000~3000元
                </label>
                <label class="btn">
                  <input type="radio" name="options" id="option3" /> 3000~5000元
                </label>
              </div>  
            </td>
          </tr>
          <tr>
            <td>
            <b>居室：</b>
            <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                  <input type="radio" name="options" id="option1" /> 1居
                </label>
                <label class="btn">
                  <input type="radio" name="options" id="option2" /> 2居
                </label>
                <label class="btn">
                  <input type="radio" name="options" id="option3" /> 3居
                </label>
                <label class="btn">
                  <input type="radio" name="options" id="option3" /> 4居
                </label>
            </div>
            </td>
          </tr>
          <tr>
            <td>
              <b>面积：</b>
              <div class="btn-group" data-toggle="buttons">
                <label class="btn">
                  <input type="radio" name="options" id="option1" /> 40m²
                </label>
                <label class="btn">
                  <input type="radio" name="options" id="option2" /> 40~60m²
                </label>
                <label class="btn">
                  <input type="radio" name="options" id="option3" /> 60~80m²
                </label>
                <label class="btn">
                  <input type="radio" name="options" id="option3" /> 80~100m²
                </label>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--筛选条件-->

    <!--房屋表-->
    <div class="div-box">
      <table class="table table-bordered">
      <thead>
        <tr class="active">
          <td>
            <div class="btn-group btn-group-sm">
              <button type="button" class="btn btn-default">默认排序</button>
              <button type="button" class="btn btn-default">价格</button>
              <button type="button" class="btn btn-default">面积</button>
            </div>
          </td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
              <ul class="nav navbar-nav">
                <li class="li-house">
                   <img src="../imgs/v800x600_ChAFD1py4hyAYJ47AA0otTGTT6U244.jpg" alt="imgs" />
                </li>
                <li class="li-operation">
                  <h2><a href="#">有家·紫东馨3居室</a></h2>
                  <h3>[成华万象街]</h3>
                  <span class="label label-primary">离地铁近</span>
                  <span class="label label-primary">独卫</span>
                </li>
                <li class="li-price">
                  <h2>900$</h2>
                  <button type="button" class="btn btn-warning">查看更多</button>
                </li>
              </ul>
          </td>
        </tr>

        <tr>
          <td>
              <ul class="nav navbar-nav">
                <li class="li-house">
                   <img src="../imgs/v800x600_ChAFD1py5eaAZUrOAAzCjA7Xtec437.jpg" alt="imgs" />
                </li>
                <li class="li-operation">
                  <h2><a href="#">有家·紫东馨3居室</a></h2>
                  <h3>[成华万象街]</h3>
                  <span class="label label-primary">离地铁近</span>
                  <span class="label label-primary">独卫</span>
                </li>
                <li class="li-price">
                  <h2>900$</h2>
                  <button type="button" class="btn btn-warning">查看更多</button>
                </li>
              </ul>
          </td>
        </tr>

        <tr>
          <td>
            <ul class="pagination">
            <li><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li class="disabled"><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li class="active"><a href="#">6</a></li>
            <li><a href="#">»</a></li>
            </ul>
          </td>
        </tr>
      </tbody>
    </table>
    </div>
    <script>
      $("#myinfo").click(function () {
          $.ajax({
              type: 'post',
              url: 'showUser',
              beforeSend: function (XMLHttpRequest) {

              },
              success: function (data) {


                  $("#nickname").val(data.nickname);
                  $("#birthday").val(data.birthday);
                  $("#address").val(data.address);
              },
              complete: function (XMLHttpRequest, textStatus) {

              },
              error: function () {
                  alert("error");
              }
          });
      });


    </script>
   
    <!--房屋表-->
  </body>
</html>